<template>
  <div>
    <div class="wrap">
      <!-- header头部 -->
      <!-- <m-header
        :backcolor="'#1968FA'"
        :color="'#fff'"
        opacity="1"
        hocolor="#fff"
        filter="blur(0px)"
      ></m-header> -->
      <div style="height: 50px"></div>
      <div class="container" style="width:100%;max-width:1200px">
        <div class="content">
          <div class="right-box">
            <!-- menu栏 -->
            <m-Menu activeDefault="1"></m-Menu>
            <!--  -->
          </div>
          <div class="left-box" v-loading="$store.state.isLoading">
            <div class="top">
              <div class="title">个人信息</div>
              <el-divider></el-divider>
            </div>
            <div>
              <div class="input-box">
                <div class="dia-til">姓名:</div>
                <el-input
                  readonly
                  unselectable="on"
                  :value="datalist.name ? datalist.name : '暂无'"
                  class="input"
                ></el-input>
              </div>
              <div class="input-box">
                <div class="dia-til">电话:</div>
                <el-input
                  readonly
                  unselectable="on"
                  :value="datalist.mobile ? datalist.mobile : '暂无'"
                  class="input"
                ></el-input>
              </div>
              <div class="input-box" v-if="$store.state.userData.type==1">
                <div class="dia-til">政治面貌:</div>
                <el-input
                  readonly
                  unselectable="on"
                  :value="
                    datalist.politicalAffiliation
                      ? datalist.politicalAffiliation
                      : '暂无'
                  "
                  class="input"
                ></el-input>
              </div>
              <div class="input-box" v-if="$store.state.userData.type==1">
                <div class="dia-til">职位:</div>
                <el-input
                  readonly
                  unselectable="on"
                  :value="
                    datalist.officialCapacity
                      ? datalist.officialCapacity
                      : '暂无'
                  "
                  class="input"
                ></el-input>
              </div>
              <div class="input-box" v-if="$store.state.userData.type==1">
                <div class="dia-til">职称:</div>
                <el-input
                  readonly
                  unselectable="on"
                  :value="
                    datalist.officialCapacityName
                      ? datalist.officialCapacityName
                      : '暂无'
                  "
                  class="input"
                ></el-input>
              </div>
              <div class="input-box">
                <div class="dia-til">学校名称:</div>
                <el-input
                  readonly
                  unselectable="on"
                  :value="datalist.orgName ? datalist.orgName : '暂无'"
                  class="input"
                ></el-input>
              </div>
              <div class="input-box">
                <div class="dia-til">单位地址:</div>
                <el-input
                  readonly
                  unselectable="on"
                  :value="datalist.orgAddress ? datalist.orgAddress : '暂无'"
                  class="input"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- footer页脚 -->
      <!-- <m-fotter /> -->
    </div>
  </div>
</template>

<script>
import { STATUS_CODE_OK } from "@/config";
import { getUserInfo } from "@/api/personalCenter.js";
// import MHeader from "@/components/MHeader.vue";
// import MFotter from "@/components/MFotter.vue";
import MMenu from "@/components/MMenu.vue";
export default {
  name: "information",
  data() {
    return {
      datalist: {},
    };
  },
  created() {
    this.handleGetUserInfo();
  },
  methods: {
    async handleGetUserInfo() {
      let { data } = await getUserInfo();
      if (data.code == STATUS_CODE_OK) {
        this.datalist = data.data;
      }
    },
  },
  components: {
    // MHeader,
    // MFotter,
    MMenu,
  },
};
</script>

<style scoped lang="scss">
$bg-color: #fff;
::v-deep .el-divider--horizontal {
  margin: 20px 0;
}
::v-deep .el-menu {
  min-height: 600px;
}
.dialog-box {
  .pdf-box {
    overflow-y: auto;
    max-height: 600px;
    display: flex;
    width: 600px;
    flex-direction: column;
    align-items: center;
    .pdf {
      width: 100%;
      border: 1px solid #000;
      margin-bottom: 10px;
    }
  }
  .dialog-video {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
}
.wrap {
  background-color: $bg-color;
  .container {
    padding-bottom: 80px;
    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      .right-box {
        flex: 0.2;
        border-radius: 10px 10px 10px 10px;
        .el-menu {
          border-right: none;
        }
      }
      .left-box {
        .input-box {
          display: flex;
          align-items: center;
          width: 400px;
          margin-bottom: 30px;
          .dia-til {
            min-width: 100px;
            margin: 0px 10px;
            padding: 0px 10px;
            text-align: left;
          }
        }
        flex: 0.8;
        margin: 0px 0px 0px 20px;
        padding: 0px 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px 10px 10px 10px;
        .top {
          .input {
            width: 230px;
          }
          .title {
            font-size: 18px;
            padding-top: 20px;
          }
        }
        .bottom {
          .empty {
            display: flex;
            padding: 30px;
            height: 300px;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            img {
              width: 250px;
              height: 250px;
            }
            .text {
              color: red;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
